<template>
	<view>
		<view class="bg_FFFFFF padding-tb-xs">
			<swiper :autoplay="true" :interval="3000" :duration="1000" style="height: 168upx;">
				<swiper-item>
					<view class="flex">
						<!-- swiper 1 开始 -->
						<view class="flex-sub exponent-item padding-tb-sm radius text-center">
							<view class="text-black text-bold">上证指数</view>
							<view class="text-red text-bold text-xl margin-tb-xs":class="shangZheng.P>shangZheng.YC ? 'cE02C3A':'c37A037'">{{shangZheng.P}}</view>
							<view class="text-red text-sm">
								<text :class="shangZheng.P>shangZheng.YC ? 'cE02C3A':'c37A037'">{{(shangZheng.P-shangZheng.YC).toFixed(2)}}</text>
								<text class="margin-left-xs" :class="shangZheng.P>shangZheng.YC ? 'cE02C3A':'c37A037'">{{((shangZheng.P-shangZheng.YC) *10/shangZheng.YC *10) .toFixed(2)}}%</text>
							</view>
							<view class="gainsProgressBox flex-f1 center margin-top-xs">
								<view class="bg-red gainsProgress" :style="{'width':'80px'}"></view>
								<view class="bg-cb gainsProgress gainsProgressCenter" :style="{'width':'5px'}"></view>
								<view class="bg-green gainsProgress" :style="{'width':'15px'}"></view>
							</view>
						</view>
						<!-- swiper 1 结束 -->
						<!-- swiper 1 开始 -->
						<view class="flex-sub exponent-item padding-tb-sm radius text-center">
							<view class="text-black text-bold">创业板指</view>
							<view class="text-red text-bold text-xl margin-tb-xs" :class="chuangYe.P>chuangYe.YC ? 'cE02C3A':'c37A037'">{{chuangYe.P}}</view>
							<view class="text-red text-sm">
								<text :class="chuangYe.P>chuangYe.YC ? 'cE02C3A':'c37A037'">{{(chuangYe.P-chuangYe.YC).toFixed(2)}}</text>
								<text class="margin-left-xs" :class="chuangYe.P>chuangYe.YC ? 'cE02C3A':'c37A037'">{{((chuangYe.P-chuangYe.YC) *10/chuangYe.YC *10) .toFixed(2)}}%</text>
							</view>
							<view class="gainsProgressBox flex-f1 center margin-top-xs">
								<view class="bg-red gainsProgress" :style="{'width':'80px'}"></view>
								<view class="bg-cb gainsProgress gainsProgressCenter" :style="{'width':'5px'}"></view>
								<view class="bg-green gainsProgress" :style="{'width':'15px'}"></view>
							</view>
						</view>
						<!-- swiper 1 结束 -->
						<!-- swiper 1 开始 -->
						<view class="flex-sub exponent-item padding-tb-sm radius text-center">
							<view class="text-black text-bold">深证成指</view>
							<view class="text-red text-bold text-xl margin-tb-xs" :class="shenZheng.P>shenZheng.YC ? 'cE02C3A':'c37A037'">{{shenZheng.P}}</view>
							<view class="text-red text-sm">
								<text :class="shenZheng.P>shenZheng.YC ? 'cE02C3A':'c37A037'">{{(shenZheng.P-shenZheng.YC).toFixed(2)}}</text>
								<text class="margin-left-xs" :class="shenZheng.P>shenZheng.YC ? 'cE02C3A':'c37A037'">{{((shenZheng.P-shenZheng.YC) *10/shenZheng.YC *10) .toFixed(2)}}%</text>
							</view>
							<view class="gainsProgressBox flex-f1 center margin-top-xs">
								<view class="bg-red gainsProgress" :style="{'width':'80px'}"></view>
								<view class="bg-cb gainsProgress gainsProgressCenter" :style="{'width':'5px'}"></view>
								<view class="bg-green gainsProgress" :style="{'width':'15px'}"></view>
							</view>
						</view>
						<!-- swiper 1 结束 -->
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 新股统计 开始 -->
<!-- 		<view class="flex justify-between align-center padding-lr padding-tb-sm bg_FFFFFF">
			<view class="text-black text-df">新股日历</view>
			<view class="flex justify-end align-center">
				<view class="margin-right-xs text-sm color_99A2B5">今日<text class="text-blue">1</text>支新股可申购</view>
				<image src="/static/images/icon/right.png" mode="" style="width: 14rpx;height: 24rpx;"></image>
			</view>
		</view> -->
		<!-- 新股统计 结束 -->
		
		<!-- 热门行业 -->
		<view class="bg_FFFFFF margin-top-sm">
			<view class="padding-lr padding-tb-sm text-black text-lg text-left border-bottom-1B202C">{{columnList.industry.title}}</view>
			<view class="flex justify-around padding-tb">
				<view v-for="(val,key) in columnList.industry.list" :key="key">
					<view class="text-black text-lg text-center">{{val.plate}}</view>
					<view class="color_E23232 text-xl text-center margin-top-sm" v-if="val.Increase_share < 0" style="color: #45c74f;">{{val.Increase}}%</view>
					<view class="color_E23232 text-xl text-center margin-top-sm" v-if="val.Increase_share >= 0">{{val.Increase}}%</view>
				</view>
			</view>
		</view>
		
		<!-- 热门概念 -->
		<view class="bg_FFFFFF margin-top-sm">
			<view class="padding-lr padding-tb-sm text-black text-lg text-left border-bottom-1B202C">{{columnList.concepts.title}}</view>
			<view class="flex justify-around padding-tb">
				<view v-for="(val,key) in columnList.concepts.list" :key="key">
					<view class="text-black text-lg text-center">{{val.plate}}</view>
					<view class="color_E23232 text-xl text-center margin-top-sm" v-if="val.Increase_share < 0" style="color: #45c74f;">{{val.Increase}}%</view>
					<view class="color_E23232 text-xl text-center margin-top-sm" v-if="val.Increase_share >= 0">{{val.Increase}}%</view>
				</view>
			</view>
		</view>
		
		<!-- 热门榜单 开始-->
		<view class="margin-top-sm bg_FFFFFF">
			<view>
				<view class="flex justify-between align-center padding-lr padding-tb-sm border-bottom-1B202C">
					<view class=" text-black text-lg text-left ">热门榜单</view>
					<image src="/static/images/icon/right.png" mode="" style="width: 14rpx;height: 24rpx;"></image>
				</view>
			</view>
			<scroll-view scroll-x class="bg_FFFFFF nav border-bottom-1B202C" scroll-with-animation>
				<view class="cu-item text-df" :class="index==TabCur?'text-blue cur':'color_A6AFC3'" v-for="(item,index) in tabList" :key="index" @tap="TabCur = index" :data-id="index">
					{{item}}
				</view>
			</scroll-view>
			
			<!-- 涨幅榜 start-->
			<view class="flex justify-between align-center padding border-bottom-1B202C">
				<view class="flex-sub text-sm color_99A2B5">股票名称</view>
				<view class="flex-sub flex justify-between align-center">
					<view class="flex-sub text-sm color_99A2B5">最新价</view>
					<view class="flex-sub text-sm color_99A2B5 text-right">涨跌幅</view>
				</view>
			</view>
			<!-- 涨幅榜 循环 start-->
			<view class="flex justify-between align-center padding border-bottom-1B202C" v-if="TabCur == 0"  v-for="(item,index) in upData" :key="index"  @click="toInfo(item)">
				<view class="flex-sub">
					<view class="text-black text-xl">{{item.N}}</view>
					<view class="margin-top-xs text-sm color_6B728A">{{item.C}}</view>
				</view>
				<view class="flex-sub flex justify-between align-center">
					<view class="flex-sub text-xl text-bold text-black">{{item.P}}</view>
					<view class="flex-sub text-xl text-bold color_E23232 text-right">{{item.ZF}}%</view>
				</view>
			</view>
			<!-- 涨幅榜 循环 end-->
			<!-- 涨幅榜 循环 start-->
			<view class="flex justify-between align-center padding border-bottom-1B202C" v-if="TabCur == 1"  v-for="(item,index) in downData" :key="index"  @click="toInfo(item)">
				<view class="flex-sub">
					<view class="text-black text-xl">{{item.N}}</view>
					<view class="margin-top-xs text-sm color_6B728A">{{item.C}}</view>
				</view>
				<view class="flex-sub flex justify-between align-center">
					<view class="flex-sub text-xl text-bold text-black"  style="color: #3ca509;">{{item.P}}</view>
					<view class="flex-sub text-xl text-bold color_E23232 text-right"  style="color: #3ca509;">{{item.ZF}}%</view>
				</view>
			</view>
			<!-- 涨幅榜 循环 end-->
			<!-- 涨幅榜 end -->
			
		</view>
	
		<!-- 热门榜单 结束 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: ['涨幅榜', '跌幅榜'],
				TabCur: 0, //当前选中的榜单
				
				// 热门行业
				columnList: {
					'industry': {
						title: '热门行业',
						open: true,
						list: []
					},
					'concepts': {
						title: '热门概念',
						open: true,
						list: []
					}
				},
				shares: [],
				shangZheng: {},
				chuangYe: {},
				shenZheng: {},
				// 涨跌榜单
				page_1: 1,
				page_2: 1,
				upData: [],
				downData: [],
			}
		},
		methods: {
			// 新增
			toInfo: function(data) {
				uni.navigateTo({
					url: "/pages/gzQiYe/sharesInfo?name=" + data.N + "&code=" + data.FS,
				})
			},
			toInfo_n: function(data) {
				uni.navigateTo({
					url: "/pages/gzQiYe/sharesInfo?name=" + data.name + "&code=" + data.scode,
				})
			},
			getIndexShares: function() {
				this.$Request.get(this.$api.index.getIndexShares).then(res => {
					this.shares = res.data;
					this.shangZheng = this.shares[0];
					this.chuangYe = this.shares[1];
					this.shenZheng = this.shares[2];
			
				})
			},
			// 热门
			getListHostData: function() {
				this.$Request.get(this.$api.index.po_gethotlist).then(res => {
					this.columnList.industry.list = res.data.industry
					this.columnList.concepts.list = res.data.concepts
				})
			},
			//获取涨幅榜
			getSharesList_up: function() {
				this.$Request.post(this.$api.index.getSharesListFlag, {
					flag: 2,
					page: this.page_1,
				}).then(res => {
					let that = this;
					res.data.forEach(function(item, index) {
						that.upData.push(item);
					})
							
				})
			},
			getSharesList_down: function() {
				this.$Request.post(this.$api.index.getSharesListFlag, {
					flag: 1,
					page: this.page_2,
				}).then(res => {
					let that = this;
					res.data.forEach(function(item, index) {
						that.downData.push(item);
					})
							
				})
			},
			addMore(e) {
				if(e == 1){
					this.page_1 = this.page_1 + 1;
					this.getSharesList_up()
				}
				
				if(e == 2){
					this.page_2 = this.page_2 + 1;
					this.getSharesList_down()
				}
			}
		},
		created() {
			this.getIndexShares()
			this.getListHostData()
			this.getSharesList_up()
			this.getSharesList_down()
		}
	}
</script>
<style scoped>
	.border-bottom-1B202C{
		border-bottom-color: #EDEDED !important;
	}
	.text-blue, .line-blue, .lines-blue {
	    color: #EE515A;
	}
</style>
<style lang="scss">
	.gainsProgressBox {
		margin: 10rpx 10rpx 0 10rpx;
	}

	.gainsProgress {
		height: 5rpx;
	}

	.gainsProgressCenter {
		margin: 0 4px;
	}
</style>
